<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2021-03-18 14:14:43
 * @LastEditTime: 2022-03-18 15:19:37
 * @LastEditors: 阳婷
-->
<template>
    <div class="sideBox">
        <div class="sideBoxInfo">
            <el-form ref="forms" :rules="rules" :model="form" label-width="140px">
                <el-form-item label="商品类型名称" prop="name">
                    <el-input v-model="form.name" clearable></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footerBtn">
            <el-button @click="onSubmit" type="primary" size="small">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {
        ref,
        reactive,
        toRefs,
        defineComponent,
        onMounted,
        watch,
        getCurrentInstance
    } from "vue";
    import {
        deepCopy,
        isEmptyObject
    } from "@/utils/index"
    export default defineComponent({
        props: ["rowData"],
        setup(props) {
            const datas = reactive({
                rules: {
                    name: [{
                        required: true,
                        message: "请输入商品类型名称",
                        trigger: "blur"
                    }]
                },
                form: {
                    id: '',
                    name: ''
                }
            })
            onMounted(() => {
                clearData();
                if (!isEmptyObject(props.rowData)) {
                    datas.form = deepCopy(props.rowData)
                }
            });
            watch(() => props.rowData, (newRow, oldRow) => {
                clearData();
                if (!isEmptyObject(newRow)) {
                    datas.form = deepCopy(newRow);
                }
            });
            const { proxy } = getCurrentInstance();
            const forms = ref(null)
            const onSubmit = () => {
                if (datas.form.id) {
                    update()
                } else {
                    add()
                }
            }
            const add = () => {
                proxy.$ajax("post", "/api/categories", datas.form, data => {
                    if (data.code == 200) {
                        clearData();
                        closeBox()
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            }
            const update = () => {
                proxy.$ajax("put", "/api/categories/" + datas.form.id, datas.form, data => {
                    if (data.code == 200) {
                        clearData()
                        closeBox()
                    }
                    proxy.$message({
                        type: "success",
                        message: data.msg
                    })
                })
            }
            const closeBox = () => {
                proxy.$parent.$parent.$parent.show = false
                proxy.$parent.$parent.$parent.getData()
            }
            const clearData = () => {
                datas.form = {
                    id: '',
                    name: ''
                }
            }
            return { ...toRefs(datas), onSubmit, forms }
        }
    })






</script>